<template>
  <transition name="fade" mode="out-in">
    <div
      draggable="true"
      class="list_item"
      @dragstart.capture="dragstarthandle(item, index, $event)"
      @dragover.prevent="dragoverhandle(item, index, $event)"
      @drop.stop="drophandle(item, index, $event)"
      @click="selcethandle(item, index)"
      @mouseenter="showDelete = true"
      @mouseleave="showDelete = false"
    >
      <!--轮播组件-->
      <lunbo-com
        v-if="item.type == 34"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--文字模块-->
      <font-com
        v-if="item.type == 35"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--商品组件-->
      <shop-com
        v-if="item.type == 11"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--优惠劵-->
      <coupon-com
        v-if="item.type == 15"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--店铺头部-->
      <header-com
        v-if="item.type == 17"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--标题栏-->
      <title-com
        v-if="item.type == 19"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--搜索-->
      <search-com
        v-if="item.type == 20"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--图片导航-->
      <image-com
        v-if="item.type == 21"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--图文列表-->
      <image-text-com
        v-if="item.type == 22"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--分类导航-->
      <class-nav-com
        v-if="item.type == 23"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--空白占位符-->
      <white-com
        v-if="item.type == 24"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--限时秒杀-->
      <limit-com
        v-if="item.type == 25"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--拼团商品-->
      <spell-group-com
        v-if="item.type == 26"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--砍价商品-->
      <bargain-com
        v-if="item.type == 27"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!-- 视频 -->
      <video-com
        v-if="item.type == 28"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!-- 底部导航tabBar -->
      <tab-bar-com
        v-if="item.type == 29"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!--文章模块-->
      <article-com
        v-if="item.type == 30"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />
      <!-- 地址 -->
      <address-com
        v-if="item.type == 31"
        :item="item"
        :index="index"
        :show-delete="showDelete"
        @deleteCurItem="deleteCurItem"
      />

      <!-- 更多组件... -->
    </div>
  </transition>
</template>
<script>
// import vueSwiper from './common/vueSwiper'
import components from "./component/list-item";
// eslint-disable-next-line no-extend-native
// String.prototype.getByteLen = function () {
//   var len = 0
//   for (var i = 0; i < this.length; i++) {
//     if ((this.charCodeAt(i) & 0xff00) !== 0) len++
//     len++
//   }
//   return len
// }
export default {
  name: "ListItem",
  components,
  props: {
    index: {
      type: Number,
      default: -1
    },
    item: {
      type: Object,
      required: true,
      default: () => {}
    },
    draglist: {
      type: Array,
      default: () => []
    },
    alleclect: {
      required: true,
      type: Array
    },
    dargsFlageSort: {
      type: Boolean,
      required: true
    }
  },
  // components: {
  //   vueSwiper
  // },
  data() {
    return {
      showDelete: false // 展示删除
      // swiperOption: {
      //   effect: 'coverflow',
      //   slidesPerView: 3,
      //   // centeredSlides: true,
      //   // loop: true,
      //   autoplay: {
      //     delay: 5000,
      //     disableOnInteraction: false
      //   },
      //   coverflowEffect: {
      //     rotate: 0,
      //     stretch: 0,
      //     depth: 0,
      //     modifier: 0,
      //     slideShadows: false
      //   }
      // },
      //    imgList:[require('../assets/images/1.png'),]
    };
  },
  watch: {
    draglist() {
      this.$emit("update:draglist", this.draglist);
    }
  },
  methods: {
    // innertextNbsp: function(v) {
    //   const val = v;
    //   const val2 = val.replace(/\s/g, "&nbsp;");
    //   // const val3 = val2.replace(/_@/g, "<br/>");
    //   return val2;
    // },
    dragstarthandle(item, index, e) {
      e.dataTransfer.setData("data", index);
      this.$emit("dargsFlageSortFun", true);
    },
    drophandle(item, index, e) {
      // 判断是当前组件触发还是父组件触发
      if (this.dargsFlageSort) {
        var getIndex = e.dataTransfer.getData("data");
        if (getIndex.startsWith("origin")) {
          const i = getIndex.substring(6);
          this.draglist.splice(++index, 0, this.alleclect[i]);
        } else {
          const needpushitem = this.draglist.splice(getIndex, 1)[0];
          this.draglist.splice(index, 0, needpushitem);
        }
      } else {
        let getIndex = e.dataTransfer.getData("dataFa");
        const i = getIndex.substring(6);
        this.draglist.splice(
          index,
          0,
          JSON.parse(JSON.stringify(this.alleclect[i]))
        );
        this.draglist.forEach(ele => {
          if (ele.type === 26) {
            this.$emit("dargsFlageSortFun", false);
          }
        });
      }
    },
    dragoverhandle() {},
    selcethandle(item, index) {
      this.$emit("select", item, index);
    },
    deleteCurItem(item, index) {
      this.$emit("select", item, index, true);
      this.draglist.splice(index, 1);
    }
  }
};
</script>
<style lang="scss">
.list_item {
  width: 372px;
  cursor: move;
}
.el-carousel__button {
  border-radius: 50%;
  width: 8px !important;
  height: 8px !important;
}
.el-progress-bar__innerText {
  line-height: 14px;
  display: block;
}
.el-progress-bar,
.el-progress-bar__inner::after,
.el-progress-bar__innerText,
.el-spinner {
  display: block !important;
}

.list-item-delete {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  line-height: 30px;
  background-color: #fff;
  color: #2f85ff;
  width: 100%;
  z-index: 998;
  .pull_left {
    float: left;
  }
  .pull_right {
    float: right;
    cursor: pointer;
  }
  span:first-child {
    padding-left: 10px;
  }
  span:last-child {
    padding-right: 10px;
  }
}
// .list-item-clearfix:before,
// .list-item-clearfix:after {
//   content: " ";
//   display: table;
// }
// .list-item-clearfix:after {
//   clear: both;
// }
</style>
